<template>
	<view class="audio-player">
		<view class="player-header">
			<image class="header-bg" :src="iconUrls.headerBg" mode="aspectFill"></image>
			<view class="screen-control">
				<switch :checked="keepScreenOn" @change="toggleScreenOn" color="#4CD964" style="transform: scale(0.7);" />
				<text>{{ keepScreenOn ? '常亮' : '自动' }}</text>
			</view>
			<text class="title">晨读趁早</text>
			<view class="share-btn" @tap="showShareMenu">
				<image :src="iconUrls.share"></image>
			</view>
		</view>
		
		<view class="player-content">
			<view class="current-audio">
				<image class="music-icon" :class="{ playing: isPlaying }" :src="iconUrls.musicNote"></image>
				<text class="audio-name">{{ formatFileName(currentAudio.name) || '未选择音频' }}</text>
				<view class="play-mode" @tap="changePlayMode">
					<image :src="playModeIcon"></image>
				</view>
			</view>
			
			<!-- 添加进度条和A-B跟读控制 -->
			<view class="progress-container" v-if="currentAudio.path">
				<view class="time-info">
					<text>{{ formatTime(currentTime) }}</text>
					<text>{{ formatTime(duration) }}</text>
				</view>
				<view class="progress-bar" @tap="seek">
					<view class="progress-bg"></view>
					<view class="progress-current" :style="{ width: progress + '%' }"></view>
					<view class="point-a" v-if="pointA >= 0" :style="{ left: (pointA / duration * 100) + '%' }"></view>
					<view class="point-b" v-if="pointB >= 0" :style="{ left: (pointB / duration * 100) + '%' }"></view>
				</view>
				<view class="ab-controls">
					<button 
						class="ab-btn" 
						:class="{ active: pointA >= 0 }" 
						@tap="setPointA"
					>A点</button>
					<button 
						class="ab-btn" 
						:class="{ active: pointB >= 0 }" 
						@tap="setPointB"
					>B点</button>
					<button 
						class="ab-btn clear" 
						@tap="clearABPoints"
						v-if="pointA >= 0 || pointB >= 0"
					>清除</button>
				</view>
			</view>
			
			<view class="controls">
				<view class="control-btn prev" @tap="prevAudio" :class="{ disabled: !audioList.length }">
					<image :src="iconUrls.prev"></image>
				</view>
				<view class="control-btn play" @tap="playOrPause">
					<image :src="isPlaying ? iconUrls.pause : iconUrls.play"></image>
				</view>
				<view class="control-btn next" @tap="nextAudio" :class="{ disabled: !audioList.length }">
					<image :src="iconUrls.next"></image>
				</view>
			</view>
			
			<view class="playlist">
				<view class="playlist-header">
					<text class="section-title">音频列表</text>
					<view class="header-actions">
						<view class="clear-btn" @tap="clearAllAudio" v-if="audioList.length > 0">
							<image :src="iconUrls.delete"></image>
							<text>清空</text>
						</view>
						<view class="add-btn" @tap="chooseAudio">
							<image :src="iconUrls.add"></image>
							<text>添加音频</text>
						</view>
					</view>
				</view>
				<view class="playlist-content">
					<view 
						v-for="(audio, index) in audioList" 
						:key="index"
						class="playlist-item"
						:class="{ active: currentIndex === index }"
						@tap="playAudio(index)"
					>
						<view class="playlist-item-content">
							<image class="item-icon" :src="iconUrls.story"></image>
								<text class="item-name">{{ formatFileName(audio.name) }}</text>
						</view>
						<view class="playlist-item-actions">
							<text class="duration-text">{{ formatTime(audio.duration) }}</text>
							<view class="delete-btn" @tap.stop="deleteAudio(index)">
								<image :src="iconUrls.delete"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { icons } from '../../static/icons.js'
import { shareCover } from '../../static/share-cover.js'

export default {
	// 分享给好友
	onShareAppMessage(res) {
		return {
			title: '晨读趁早 - 让阅读成为习惯',
			path: '/pages/index/index',
			imageUrl: shareCover
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '晨读趁早 - 让阅读成为习惯',
			query: '',
			imageUrl: shareCover
		}
	},
	setup() {
		const audioList = ref([])
		const currentIndex = ref(-1)
		const currentAudio = ref({})
		const isPlaying = ref(false)
		const audioContext = ref(null)
		const currentTime = ref(0)
		const duration = ref(0)
		const pointA = ref(-1)
		const pointB = ref(-1)
		const isABLoop = ref(false)
		// 添加屏幕常亮控制
		const keepScreenOn = ref(false)

		// 计算进度百分比
		const progress = computed(() => {
			if (!duration.value) return 0
			const progressValue = (currentTime.value / duration.value) * 100
			console.log('Progress computed:', progressValue)
			return progressValue
		})

		// 格式化时间
		const formatTime = (time) => {
			const minutes = Math.floor(time / 60)
			const seconds = Math.floor(time % 60)
			return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
		}

		// 格式化文件名
		const formatFileName = (fileName, maxLength = 20) => {
			if (!fileName) return ''
			if (fileName.length <= maxLength) return fileName
			
			const ext = fileName.split('.').pop()
			const nameWithoutExt = fileName.slice(0, -(ext.length + 1))
			const truncatedName = nameWithoutExt.slice(0, maxLength - 3) + '...' + ext
			return truncatedName
		}

		// 图标资源
		const iconUrls = {
			headerBg: icons.headerBg,
			musicNote: icons.musicNote,
			play: icons.play,
			pause: icons.pause,
			prev: icons.prev,
			next: icons.next,
			add: icons.add,
			story: icons.story,
			delete: icons.delete,
			share: icons.share  // 添加分享图标
		}

		// 切换屏幕常亮状态
		const toggleScreenOn = (e) => {
			keepScreenOn.value = e.detail.value
			uni.setKeepScreenOn({
				keepScreenOn: keepScreenOn.value
			})
			// 保存设置到本地存储
			uni.setStorageSync('keepScreenOn', keepScreenOn.value)
			
			// 显示提示
			uni.showToast({
				title: keepScreenOn.value ? '已开启屏幕常亮' : '已恢复自动熄屏',
				icon: 'none'
			})
		}

		// 初始化音频管理器
		onMounted(() => {
			audioContext.value = uni.createInnerAudioContext()
			
{{ ... }}
</script>

<style>
.audio-player {
{{ ... }}
.progress-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
{{ ... }
